<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"></meta>
		<title>layui</title>
		<meta name="renderer" content="webkit"></meta>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
		<link rel="stylesheet" href="layui/css/layui.css" media="all"></link>
	</head>
	<body>
	<style>
	img{
	width:50px;
	lheight:50px;
	}
	</style>
 <script src="layui/layui.js"></script>
 
		
	  <div class="layui-btn-group demoTable">
			 
			<button class="layui-btn" data-type="add">添加</button>
		</div>
		
		<table class="layui-table" id="demo" lay-filter="demo"></table>
		<!--编辑考试信息-->
		<div id="editexam" class="layer_self_wrap" style="width:500px;display:none;">
			<form id="examForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
<!-- 考试信息ID -->
				<input id="ExaminationInformationID" type="hidden" name="ExaminationInformationID" />
<!-- 考试名称 -->
				<div class="layui-form-item">
					<label class="layui-form-label">考试名称</label>
					<div class="layui-input-inline">
						<input id="ExaminationInformationName" name="ExaminationInformationName" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
<!-- 考试费用 -->
			<div class="layui-form-item">
					<label class="layui-form-label">考试费用</label>
					<div class="layui-input-inline">
						<input id="ExaminationInformationCost" name="ExaminationInformationCost" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
<!-- 考试时间 -->
				<div class="layui-form-item">
					<label class="layui-form-label">考试时间</label>
					<div class="layui-input-inline">
						<input id="ExaminationInformationTime" name="ExaminationInformationTime" lay-verify="required" autocomplete="off"   type="text"  class="layui-input"     />
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 10px;">
						<button class="layui-btn" lay-submit="" lay-filter="editSubmit">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		
			<!--添加考试信息-->
		<div id="addexam" class="layer_self_wrap" style="width:500px;display:none;">
			<form id="addexamForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
<!-- 考试信息ID -->
				<input id="ID" type="hidden" name="ExaminationInformationID" />
<!-- 考试名称 -->
				<div class="layui-form-item">
					<label class="layui-form-label">考试名称</label>
					<div class="layui-input-inline">
						<input id="Name" name="ExaminationInformationName" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
<!-- 考试费用 -->
			<div class="layui-form-item">
					<label class="layui-form-label">考试费用</label>
					<div class="layui-input-inline">
						<input id="Cost" name="ExaminationInformationCost" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
<!-- 考试时间 -->
				<div class="layui-form-item">
					<label class="layui-form-label">考试时间</label>
					<div class="layui-input-inline">
						<input id="Time" name="ExaminationInformationTime" lay-verify="required" autocomplete="off"   type="text"  class="layui-input"     />
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 10px;">
						<button class="layui-btn" lay-submit="" lay-filter="addSubmit">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script src="layui/layui.js"></script> 
		<script src="js/jquery-3.3.1.min.js"></script>
 <script>

 layui.use('table', function() {
		var table = layui.table,
			form = layui.form;
		//监听表格复选框选择
		/* table.on('checkbox(demo)', function(obj) {
			console.log(obj)
		}); */
	
			tableIns=table.render({
				elem: '#demo'
				,url: 'findallexam' //数据接口
				,id: 'idTest'
				,width: '50%'
					// ,height: 'full-50%'
					,
				cols: [
					[  
						{
							field: 'examinationInformationID',
							title: 'ID',
							width: 80,
							sort: true,
							fixed: true
						}, {
							field: 'examinationInformationName',
							title: '考试名称',
							width: 200
						}, {
							field: 'examinationInformationTime',
							title: '考试时间',
							width: 200,
							sort: true
						}, {
							field: 'examinationInformationCost',
							title: '考试费用',
							width: 100
						},{
							field: 'right',
							width: 178,
							align: 'center',
							toolbar: '#barDemo'
						}
					]
				],
				done: function(res, curr, count){
    				
     pageCurr=curr;
 }
			});
		/*}*/

		//监听工具条

		table.on('tool(demo)', function(obj) {

			var data = obj.data;
			if(obj.event === 'detail') {
				layer.msg('ID：' + data.examinationInformationID + ' 的查看操作');

			} else if(obj.event === 'del') {
				layer.confirm('真的删除行么', function(index) {
					$.ajax({
						url: "delexam?Id=" + data.examinationInformationID,
						async: true
					});
					  obj.del();
				      layer.close(index);
				});
			} else if(obj.event === 'edit') { //编辑修改
				getexamid(obj, data.examinationInformationID);

			}
		});

		 
		  var $ = layui.$,
			active = {
				getCheckData: function() { //获取选中数据
					var checkStatus = table.checkStatus('idTest'),
					data = checkStatus.data;
				layer.alert(JSON.stringify(data));

				},
				delChecKs: function() { //获取选中数目
					var checkStatus = table.checkStatus('idTest'),
						data = checkStatus.data;
					//循环删除选中的数据
					layer.confirm('真的删除' + data.length + '个数据', function(index) {
						for(i = 0; i!=data.length; i++) {
							$.ajax({
								url: "delexam?Id=" + data[i].examinationInformationID,
								//async: false
							});
						}
					
						load(obj);
						layer.closeAll();
					});
					
				},
				isAll: function() { //验证是否全选
					var checkStatus = table.checkStatus('idTest');
					layer.msg(checkStatus.isAll ? '全选' : '未全选')
				},
				add: function () {
					addexam("添加考试信息");
				}

			}; 
  
		$('.demoTable .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		
		form.on('submit(editSubmit)', function(data) {
			formSubmit(data);
			return false;
		});
		form.on('submit(addSubmit)', function(data) {
			formaddSubmit(data);
			return false;
		});
	});
 /* 日期控件 */
 layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#ExaminationInformationTime' //指定元素
	  });
	  laydate.render({
		    elem: '#Time' //指定元素
		  });
	});
 
  
	function getexamid(obj, id) {
		//回显数据
		$.get("getexamid", {
			"Id": id
		}, function(data) {
			if(data.code == "1000") {
				$("#ExaminationInformationID").val(data.obj.examinationInformationID == null ? '' :  data.obj.examinationInformationID);
				$("#ExaminationInformationName").val(data.obj.examinationInformationName == null ? '' :  data.obj.examinationInformationName);
				$("#ExaminationInformationCost").val(data.obj.examinationInformationCost == null ? '' :  data.obj.examinationInformationCost);
				$("#ExaminationInformationTime").val(data.obj.examinationInformationTime == null ? '' :  data.obj.examinationInformationTime);
				editexam("更新考试信息");
			
			} else {
				//弹出错误提示
				layer.alert(data.msg, function() {
					layer.closeAll();
					
				});
			}
		});
	}
	
	function formaddSubmit(obj) {
		$.ajax({
			url: "addexam",
			contentType: "application/json; charset=utf-8",  
		    dataType: "json",  
			type: "POST",
			async: true,
		    timeout: 50000,
			data: JSON.stringify({                    
				"examinationInformationID": $("#ID").val(),  
				"examinationInformationName": $("#Name").val(),  
				"examinationInformationCost": $("#Cost").val(),
				"examinationInformationTime": $("#Time").val()
	        }),
			success: function(data) { 
				if(data.code == "1000")
					{
					layer.alert("操作成功", function() {
						layer.closeAll();
						load(obj);
					});
				} else {
				  layer.alert(data);
				}
			} ,
			  error: function() {
				layer.alert("操作请求错误，请您稍后再试", function() {
					layer.closeAll();
					 load(obj); //自定义
				 
				});
			}  
		});
	}
	
	
	function formSubmit(obj) {
		$.ajax({
			url: "updateexam",
			contentType: "application/json; charset=utf-8",  
		    dataType: "json",  
			type: "POST",
			async: true,
		    timeout: 50000,
			data: JSON.stringify({                    
				"examinationInformationID": $("#ExaminationInformationID").val(),  
				"examinationInformationName": $("#ExaminationInformationName").val(),  
				"examinationInformationCost": $("#ExaminationInformationCost").val(),
				"examinationInformationTime": $("#ExaminationInformationTime").val()
	        }),
			
			success: function(data) {
				 
				if(data.code == "1000")
					{
					layer.alert("操作成功", function() {
						layer.closeAll();
						load(obj);
					});
				} else {
				  layer.alert(data);
				}
			} ,
			  error: function() {
				layer.alert("操作请求错误，请您稍后再试", function() {
					layer.closeAll();
					//加载load方法
					 load(obj); //自定义
				 
				});
			}  
		});
	}
function load(obj){
//重新加载table
tableIns.reload({
where: obj.field
, page: {
 curr: pageCurr //从当前页码开始
}
});
} 

function addexam(title) {
	layer.open({
		type: 1,
		title: title,
		fixed: false,
		resize: false,
		shadeClose: true,
		area: ['550px'],
		content: $('#addexam')
	});
}

	function editexam(title) {
		layer.open({
			type: 1,
			title: title,
			fixed: false,
			resize: false,
			shadeClose: true,
			area: ['550px'],
			content: $('#editexam')
		});
	}
 </script>
	</body>
</html>